<script setup>
import { reactive } from "vue";
import { get } from "@/net/index.js";

// 存储B站视频信息
const bililiMessages = reactive({
  messages: []
});

// 获取 B站的视频数据
get("/video/bilili", data => {
  console.log("B站视频数据:", data);  // 输出数据，查看是否正确
  bililiMessages.messages = data.sort((a, b) => b.video_popularity - a.video_popularity);  // 按照热度排序
});

// 存储抖音视频信息
const tiktokMessages = reactive({
  messages: []
});

// 获取 抖音的视频数据
get("/video/tiktok", data => {
  console.log("抖音视频数据:", data);  // 输出数据，查看是否正确
  tiktokMessages.messages = data.sort((a, b) => b.video_popularity - a.video_popularity);
});

// 根据热度返回不同的CSS类
function getPopularityClass(popularity) {
  if (popularity === 0) {
    return 'low-popularity';
  } else if (popularity === 1) {
    return 'medium-popularity';
  } else {
    return 'high-popularity';
  }
}
</script>

<template>
  <div class="video-container">
    <!-- B站视频排行榜 -->
    <div class="platform-column">
      <h2>B站视频排行榜</h2>
      <el-divider class="divider" />
      <div class="video-list">
        <div v-for="(message, index) in bililiMessages.messages" :key="index" :class="getPopularityClass(message.video_popularity)">
          <p>{{ index + 1 }}. {{ message.video_title }}</p> <!-- 显示排名 -->
          <p>{{ message.user_name }} 发布于 {{ message.video_time }}</p>
          <p>热度: {{ message.video_popularity === 0 ? '冷门' : message.video_popularity === 1 ? '不温不火' : '爆火' }}</p>
        </div>
      </div>
    </div>

    <!-- 抖音视频排行榜 -->
    <div class="platform-column">
      <h2>抖音视频排行榜</h2>
      <el-divider class="divider" />
      <div class="video-list">
        <div v-for="(message, index) in tiktokMessages.messages" :key="index" :class="getPopularityClass(message.video_popularity)">
          <p>{{ index + 1 }}. {{ message.video_title }}</p> <!-- 显示排名 -->
          <p>{{ message.user_name }} 发布于 {{ message.video_time }}</p>
          <p>热度: {{ message.video_popularity === 0 ? '冷门' : message.video_popularity === 1 ? '不温不火' : '爆火' }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 整体容器 */
.video-container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
}

/* 每个平台的列样式 */
.platform-column {
  width: 48%;  /* 每列占页面一半的宽度 */
  background-color: #f5f5f5;
  border-radius: 5px;
  padding: 15px;
}

/* 视频列表样式 */
.video-list {
  max-height: 600px;
  overflow-y: auto;
}

/* 分隔线样式 */
.divider {
  margin-top: 0;
  color: lightblue;
}

/* 根据热度设置不同的样式 */
.low-popularity {
  background-color: #f8d7da; /* 粉红色背景 */
  color: #721c24;
}

.medium-popularity {
  background-color: #fff3cd; /* 黄色背景 */
  color: #856404;
}

.high-popularity {
  background-color: #d4edda; /* 绿色背景 */
  color: #155724;
}

/* 统一的消息项样式 */
.video-list p {
  margin: 5px 0;
}
</style>
